{include file="public/header" /}
<body class="bgc" style="background-color: var(--f5)">
<div class="header">
    <i class="layui-icon layui-icon-left"></i> 支付订单
</div>

<div class="pay-news flex-center">
    <p>实付金额</p>
    <div><span>{$info.real_amount}</span></div>
</div>

<ul class="pay-list">
    
    {volist name="method" key="k" id="vo"}
    <li class="{if $k == 1}pay_way{/if}" data-type="{$vo.pay_way}">
        <label for="check2">
            <p class="flex-center">
                <img src="{$vo.icon}" alt="">
            </p>
            <p class="center">{$vo.title}</p>
            <img src="/static/index/img/icon{if $k == 1}2{else}3{/if}.png" alt="" class="check">
        </label>

    </li>
    {/volist}
</ul>

<p class="save save-fixed">确认支付</p>

<div class="pay-mdl-news" style="display: none">
    <div>请输入支付密码</div>
    <p class="price"><span>{$info.real_amount}</span></p>
    <p>支付金额</p>
    <input type="password" id="pay_password" placeholder="请输入支付密码">
    <p class="btn payment">确认支付</p>
</div>
</body>
{include file="public/footer"/}
<script>
    $('.pay-list li').click(function () {
        $(this).addClass('pay_way').siblings().removeClass('pay_way');
        $(this).find('.check').attr('src', '/static/index/img/icon2.png')
        $(this).siblings().find('.check').attr('src', '/static/index/img/icon3.png')
    })

    $(".payment").click(function () {
        var pay_way = $(".pay_way").attr('data-type'), pay_password = $("#pay_password").val();
        if (!pay_way) {
            layer.msg('请选择支付方式');
            return false;
        }
        if (!pay_password) {
            layer.msg('请填写支付密码');
            return false;
        }
        return common.request("{:url('order/confirmPayment')}", {
            id: '{$info.id}',
            pay_way: pay_way,
            pay_password: pay_password
        })
    });


    $('.save-fixed').click(function () {
        var pay_way = $(".pay_way").attr('data-type');
        if (!pay_way) {
            layer.msg('请选择支付方式');
            return false;
        }
        $("#pay_password").val('');
        layer.open({
            type: 1,
            offset: 'b',
            anim: 'slideUp', // 从下往上
            area: ['100%', '40%'],
            shade: 0.4,
            shadeClose: true,
            closeBtn: 0,
            title: false,
            id: 'ID-demo-layer-direction-b',
            content: $(".pay-mdl-news")
        });

    })

</script>
</html>